<%--
  Created by IntelliJ IDEA.
  User: 吴
  Date: 2023/12/20
  Time: 11:37
  To change this template use File | Settings | File Templates.
--%>
<jsp:useBean id="commodity" scope="request" type="com.xm.entity.Commodity"/>
<jsp:useBean id="address" scope="request" type="com.xm.entity.Address"/>
<jsp:useBean id="isCommodityImags" scope="request" type="java.lang.Boolean"/>
<!-- 标记为HTML格式 -->
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page isELIgnored="false" %>
<!-- 设置页面为Chain -->
<html lang="ch">
<head>
    <title>${commodity.commodityName} 立即购买</title>
    <!-- 设置地址栏主题背景颜色 -->
    <meta name="theme-color" content="#000000">
    <!-- 页面描述 -->
    <meta name="description" content="商品详情页面">
    <!-- 移动端显示 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 页面Logo -->
    <link rel="shortcut icon" href="http://localhost:8083/resource_packs/images/logo.png">
</head>
<body>
<div class="commodity">
    <div class="carousel" imgs="${commodity.commodityImages}">
        <c:if test="${isCommodityImags == true}">
            <div class="carousel-img-control">
                <img src="http://localhost:8083/resource_packs/images/carousel_left.png"
                     class="carousel-img-left" alt="左">
            </div>
        </c:if>
        <div>
            <img src="http://localhost:8083/resource_packs/images/redmi_k70_pro.jpg"
                 alt="商品图片" class="commodity-img"
                 style="${isCommodityImags == true ? '' : 'width: 600px;height:600px;'}">
        </div>
        <c:if test="${isCommodityImags == true}">
            <div class="carousel-img-control">
                <img src="http://localhost:8083/resource_packs/images/carousel_right.png"
                     class="carousel-img-right" alt="右">
            </div>
        </c:if>
    </div>
    <div class="commodity-detail" style="width: 39%;">
        <span class="model">${commodity.commodityName}</span><br><br>
        <div class="phone-directory">
            <a>${commodity.keywords}</a><br><br>
            <span class="">小米自营</span><br>
            <div class="price" commodity-price="${commodity.commodityPrice}"
                 commodity-discount="${commodity.commodityDiscount}">
                2499元
            </div>
        </div>
        <div class="line"></div>
        <div class="city">
            <img src="http://localhost:8083/resource_packs/images/positioning.png" alt="定位" class="positioning">
            <div class="street">${address.addressProvince} ${address.addressCity} ${address.addressDistrict} </div>
        </div>
        <c:forEach items="${commodity.commoditySpecificationTypeList}" var="specificationType"
                   varStatus="specificationTypeStatus">
            <div>
                <p class="specifications-type">${specificationType.specificationTypeName}</p>
                <div class="specification" row-index="${specificationTypeStatus.index}">
                    <c:forEach items="${specificationType.commoditySpecification}" var="specification"
                               varStatus="status">
                        <c:if test="${status.index == 0}">
                            <div class="memory-box specification-box" title="${specification.addPrice == ""
                                    ? 0 : specification.addPrice}元"
                                 specification-id="${specification.specificationId}">
                                    <span class="memory specification-title " add-price="${specification.addPrice == ""
                                    ? 0 : specification.addPrice}">
                                            ${specification.specificationName}
                                    </span><br>
                            </div>
                        </c:if>
                        <c:if test="${status.index != 0}">
                            <div class="memory-box" title="${specification.addPrice == ""
                                    ? 0 : specification.addPrice}元"
                                 specification-id="${specification.specificationId}">
                                    <span class="memory" add-price="${specification.addPrice == ""
                                    ? 0 : specification.addPrice}">
                                            ${specification.specificationName}
                                    </span><br>
                            </div>
                        </c:if>
                    </c:forEach>
                </div>
            </div>
        </c:forEach>
        <br>
        <c:forEach items="${commodity.commodityInsuranceTypeList}" var="commodityInsuranceType" varStatus="stauts">
            <div style="font-size: 18px;margin-bottom: 15px;line-height: 1;margin-top: 10px">
                    ${commodityInsuranceType.insuranceTypeTitle}
                <span class="serve">了解${commodityInsuranceType.insuranceTypeTitle} ></span>
            </div>
            <c:forEach items="${commodityInsuranceType.commodityInsurances}" var="insurances">
                <div class="plan" add-price="${insurances.addPrice}">
                    <div class="loop">
                        <label>
                            <input type="radio" name="option${stauts.index}"
                                   insurance-id="${insurances.insuranceId}"
                                   value="${insurances.insuranceId}" class="insurance"
                                   insurance-name="${commodity.commodityName} ${insurances.insuranceTitle}"
                                   add-price="${insurances.addPrice}">
                        </label>
                    </div>
                    <div class="circulate">
                        <img src="http://localhost:8083/resource_packs/images/${commodityInsuranceType.insuranceTypeLogo}"
                             alt="循环">
                    </div>
                    <div class="subheading">
                        <b style="font-size: 18px;margin: 0 0 10px 20px;">${commodityInsuranceType.insuranceTypeTitle}</b>
                        <span class="subheading-title">
                                <a>已省${insurances.insurancePreferential}元</a>
                            </span><br>
                        <a style="margin-top: 10px;display: block;">${commodity.commodityName} ${insurances.insuranceTitle}</a>
                        <span class="subheading-content">
                                购买前请阅读
                                <a>服务条款|常见问题</a>
                            <c:if test="${insurances.addPrice == null}">
                                <span style="color: #757575;float: right">免费</span>
                            </c:if>
                            <c:if test="${insurances.addPrice != null}">
                                <span style="color: #757575;float: right">${insurances.addPrice}元</span>
                            </c:if>

                            </span>
                    </div>
                </div>
            </c:forEach>
        </c:forEach>
        <div class="total">
            <div class="commodity-total">
                <a>
                    <a class="name-purchased-product">Redmi K70 12GB+256GB 墨羽</a>
                    <span class="specification-price">2499元</span>
                </a>
                <div class="purchase-commodity-insurance">

                </div>
            </div>
            <span class="total-price">总计 : 2499元</span>
        </div>
        <div>
            <button class="add-cart">加入购物车</button>
        </div>
        <div style="display: inline-flex;flex-wrap: wrap;margin-top: 10px">
            <div class="commodity-serve">
                <c:if test="${commodity.commodityServe.isSelfEmployed == 0}">
                    <img src="http://localhost:8083/resource_packs/images/tick.png" alt="对勾"><span>小米自营</span>
                </c:if>
            </div>
            <div class="commodity-serve">
                <c:if test="${commodity.commodityServe.isMiShipments == 0}">
                    <img src="http://localhost:8083/resource_packs/images/tick.png" alt="对勾"><span>小米发货</span>
                </c:if>
            </div>
            <div class="commodity-serve">
                <c:if test="${commodity.commodityServe.isReturn == 0}">
                    <img src="http://localhost:8083/resource_packs/images/tick.png"
                         alt="对勾"><span>7天无理由退货(到店自取拆封后不支持)</span>
                </c:if>
            </div>
            <div class="commodity-serve">
                <c:if test="${commodity.commodityServe.isPriceProtection == 0}">
                    <img src="http://localhost:8083/resource_packs/images/tick.png" alt="对勾"><span>价格保护</span>
                </c:if>
            </div>
            <div class="commodity-serve">
                <c:if test="${commodity.commodityServe.isShippingInstructions == 0}">
                    <img src="http://localhost:8083/resource_packs/images/tick.png" alt="对勾"><span>运费说明</span>
                </c:if>
            </div>
            <div class="commodity-serve">
                <c:if test="${commodity.commodityServe.isAfterSales == 0}">
                    <img src="http://localhost:8083/resource_packs/images/tick.png" alt="对勾"><span>支持售后</span>
                </c:if>
            </div>
            <div class="commodity-serve">
                <c:if test="${commodity.commodityServe.isCompanyInformation == 0}">
                    <img src="http://localhost:8083/resource_packs/images/tick.png" alt="对勾"><span>公司信息</span>
                </c:if>
            </div>
        </div>
    </div>

</div>
</body>
</html>
